<template>
    <div class="step-main"
        v-loading="deskLoading"
        :element-loading-text="deskLoadingText"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.8)">
        <div class="step-main-content-parent">
            <div class="step-main-content">
                <div class="step-left" v-if="projectType == 1" :style="{left: leftData + 'px'}">
                    <div class="left-box">
                        <div class="set-box">
                            <div class="set-box-title">
                                <i class="iconfont icon-buzhoutiaozheng"></i>
                                案例步骤
                            </div>
                        </div>
                        <div class="step-left-content" :class="{ active: activeData}">
                            <div class="step-left-flow">
                                <div class="flow-item" v-for="(item, index) in dynamicValidateForm.domains" :class="{ active: editorOrAdd && stepActiveIndex == index}">
                                    <span class="item-point"></span>
                                    <span class="item-line" v-if="(dynamicValidateForm.domains.length-1) != index || !editorOrAdd"></span>
                                    <div class="item-add" v-if="(dynamicValidateForm.domains.length-1) == index && !editorOrAdd" @click="addDomain">
                                        <i class="iconfont icon-add"></i>
                                    </div>
                                </div>
                            </div>
                            <div class="step-left-text">
                                <el-form :model="dynamicValidateForm" ref="dynamicValidateForm">
                                    <el-form-item
                                        v-for="(domain, index) in dynamicValidateForm.domains"
                                        :key="domain.key"
                                        :prop="'domains.' + index + '.value'"
                                        :rules="{
                                        required: true, message: '标题不能为空', trigger: 'blur'
                                        }"
                                    >
                                        <span :title="domain.value" v-if="editorOrAdd" :class="{ active: editorOrAdd && stepActiveIndex == index}">{{ domain.value }}</span>
                                        <el-input v-if="editorOrAdd == false" type="textarea" style="resize:none;" v-model="domain.value"></el-input>
                                        <div v-if="editorOrAdd == false && dynamicValidateForm.domains.length>1" class="text-delete"  @click.prevent="removeDomain(domain)"><i class="iconfont icon-jianhao"></i></div>
                                    </el-form-item>
                                </el-form>
                            </div>
                        </div>
                        <div class="arrow-btn" v-if="!tipsStatus" @click="arrowFn" :class="{ active: activeData}">
                            <img src="./../../assets/images/arrow_left_icon.png" />
                        </div>
                    </div>
                </div>
                <div class="step-left" v-else :style="{left: leftData + 'px'}">
                    <div class="left-box">
                        <div class="set-box">
                            <div class="set-box-title">
                                <i class="iconfont icon-buzhoutiaozheng"></i>
                                案例步骤
                            </div>
                            <button @click="settingFn" v-if="editorOrAdd"><i class="iconfont icon-icon-test-copy-copy-copy-copy-copy-copy-copy-copy-copy-copy-copy-copy-copy-copy-copy-copy-copy-copy-copy-copy"></i></button>
                        </div>
                        <div class="step-left-content" :class="{ active: activeData}">
                            <div class="step-left-flow">
                                <div class="flow-item" v-for="(item, index) in dynamicValidateForm.domains" :class="{ active: editorOrAdd && stepActiveIndex == index}">
                                    <span class="item-point"></span>
                                    <span class="item-line" v-if="(dynamicValidateForm.domains.length-1) != index || !editorOrAdd"></span>
                                    <div class="item-add" v-if="(dynamicValidateForm.domains.length-1) == index && !editorOrAdd" @click="addDomain">
                                        <i class="iconfont icon-add"></i>
                                    </div>
                                </div>
                            </div>
                            <div class="step-left-text">
                                <el-form :model="dynamicValidateForm" ref="dynamicValidateForm">
                                    <el-form-item
                                        v-for="(domain, index) in dynamicValidateForm.domains"
                                        :key="domain.key"
                                        :prop="'domains.' + index + '.value'"
                                        :rules="{
                                        required: true, message: '标题不能为空', trigger: 'blur'
                                        }"
                                    >
                                        <span v-if="editorOrAdd" :class="{ active: editorOrAdd && stepActiveIndex == index}">{{ domain.value }}</span>
                                        <el-input maxlength="50" v-if="editorOrAdd == false" type="textarea" style="resize:none;" @input="flowInput(domain)" v-model="domain.value"></el-input>
                                        <i  v-if="editorOrAdd == false" style="font-size: 12px;position: absolute; right: -12px; top: 30px;">{{domain.size}}/50</i>
                                        <div v-if="editorOrAdd == false && dynamicValidateForm.domains.length>1" class="text-delete"  @click.prevent="removeDomain(domain)"><i class="iconfont icon-jianhao"></i></div>
                                    </el-form-item>
                                    <el-form-item v-if="editorOrAdd == false" class="save-position">
                                        <div class="save-btn" @click="saveForm('dynamicValidateForm')">
                                            <i class="iconfont icon-baocun1"></i>保存
                                        </div>
                                        <div class="cancel-btn" v-if="cancelSaveStatus == true" @click="cancelSave">取消</div>
                                    </el-form-item>
                                </el-form>
                            </div>
                        </div>
                        <div class="arrow-btn" @click="arrowFn" :class="{ active: activeData}">
                            <img src="./../../assets/images/arrow_left_icon.png" />
                        </div>
                    </div>
                </div>
                <div class="step-right" v-if="projectType == 1">
                    <div class="step-breadcrumb">
                        <i class="iconfont icon-anli"></i>
                        <span>{{ projectName }}</span>
                    </div>
                    <div class="step-right-tab">
                        <ul>
                            <li :class="{ active: leftContentTabActiveIndex == 1}" @click="letContentTab(1)">
                                <span>步骤</span>
                            </li>
                            <li :class="{ active: leftContentTabActiveIndex == 2}" @click="letContentTab(2)">
                                <span>数据源</span>
                            </li>
                            <li :class="{ active: leftContentTabActiveIndex == 3}" @click="letContentTab(3)">
                                <span>环境检查</span>
                            </li>
                        </ul>
                    </div>
                    <el-form v-show="leftContentTabActiveIndex == 1" :model="ruleForm" ref="ruleForm" class="demo-ruleForm" style="margin-top:20px;">
                        <el-form-item v-show="!fangdaStatus">
                            <div class="step-right-form-title">
                                <i class="iconfont icon-mubiao1"></i>案例目标
                            </div>
                            <div class="step-right-form-text" v-if="ruleForm.projectTarget == ''">暂无目标</div>
                            <div class="step-right-form-text" v-else>{{ ruleForm.projectTarget }}</div>
                        </el-form-item>
                        <el-form-item v-show="!tipsStatus && !fangdaStatus">
                            <div class="step-right-form-title">
                                <i class="iconfont icon-xiangmumingcheng"></i>当前步骤
                            </div>
                            <span class="step-right-form-text">{{ ruleForm.stepValue }}</span>
                        </el-form-item>
                        <el-form-item v-show="!tipsStatus && !fangdaStatus">
                            <div class="step-right-form-title">
                                <i class="iconfont icon-shipin"></i>步骤视频
                            </div>
                            <div class="upload-text-box">
                                <div class="upload-text-tip"  v-if="ruleForm.uploadVideo == ''">暂无视频</div>
                                <div class="upload-text-tip"  v-else>{{ruleForm.uploadVideo}}</div>
                                <a v-if="ruleForm.uploadVideo != ''" :href="'/dataplatform/common/fileDownload?path='+encodeURIComponent(ruleForm.uploadVideo)">
                                    <i class="iconfont icon-xiazai"></i>
                                </a>
                            </div>
                        </el-form-item>
                        <el-form-item v-show="!tipsStatus && !fangdaStatus">
                            <div class="step-right-form-title">
                                <i class="iconfont icon-shujuyuan"></i>步骤源码
                            </div>
                            <div class="upload-text-box">
                                <div class="upload-text-tip"  v-if="ruleForm.uploadFile == ''">暂无源码</div>
                                <div class="upload-text-tip"  v-else>{{ruleForm.uploadFile}}</div>
                                <a v-if="ruleForm.uploadFile != ''" :href="'/dataplatform/common/fileDownload?path='+encodeURIComponent(ruleForm.uploadFile)">
                                    <i class="iconfont icon-xiazai"></i>
                                </a>
                            </div>
                        </el-form-item>
                        <el-form-item v-if="!tipsStatus">
                            <div class="step-right-form-title">
                                <i class="iconfont icon-anli"></i>步骤说明
                                <div class="title-btn-box" @click="bigEditor">
                                    <i class="iconfont icon-fangda" v-if="!fangdaStatus"></i>
                                    <i class="iconfont icon-suoxiao1" v-else></i>
                                </div>
                            </div>
                            <div style="float: left; margin-left: 30px; font-size: 14px; color: #585858;" v-if="ruleForm.stepEtiorContent == ''">暂无步骤说明</div>
                            <div class="step-editor w-e-text" :style="stepEditorHeight"></div>
                        </el-form-item>
                        <el-form-item class="save-position">
                            <el-button v-if="editorOrAdd && stepActiveIndex > 0" type="primary"  @click="pageFn(-1)">上一页</el-button>
                            <el-button v-if="editorOrAdd && dynamicValidateForm.domains.length>1 && dynamicValidateForm.domains.length != (stepActiveIndex+1)" type="primary"  @click="pageFn(1)">下一页</el-button>
                        </el-form-item>
                    </el-form>
                    <el-form v-show="leftContentTabActiveIndex == 2" :model="ruleForm" ref="ruleForm" class="demo-ruleForm" style="margin-top:20px;">
                        <el-form-item>
                            <div class="step-right-form-title">
                                <i class="iconfont icon-dizhi"></i>数据采集信息
                            </div>
                            <div class="step-right-form-text" v-if="ruleForm.dataCollectAddress == null">暂无数据</div>
                            <div class="step-right-form-text" v-else v-for="item in ruleForm.dataCollectAddress">{{ item }}</div>
                        </el-form-item>
                        <el-form-item>
                            <div class="step-right-form-title">
                                <i class="iconfont icon-yuanshuju"></i>数据源说明
                            </div>
                            <div class="data-editor w-e-text" style="border:none;"></div>
                        </el-form-item>
                    </el-form>
                    <el-form v-show="leftContentTabActiveIndex == 3" :model="ruleForm" ref="ruleForm" class="demo-ruleForm" style="margin-top:20px;">
                        <el-form-item>
                            <div class="environment-editor w-e-text" style="border:none;"></div>
                        </el-form-item>
                    </el-form>
                </div>
                <div class="step-right" v-else>
                    <div class="step-breadcrumb">
                        <i class="iconfont icon-anli"></i>
                        <span>{{ projectName }}</span>
                    </div>
                    <div class="step-right-tab">
                        <ul>
                            <li :class="{ active: leftContentTabActiveIndex == 1}" @click="letContentTab(1)">
                                <span>步骤</span>
                            </li>
                            <li :class="{ active: leftContentTabActiveIndex == 2}" @click="letContentTab(2)">
                                <span>数据源</span>
                            </li>
                            <li :class="{ active: leftContentTabActiveIndex == 3}" @click="letContentTab(3)">
                                <span>环境检查</span>
                            </li>
                        </ul>
                    </div>
                    <el-form v-show="leftContentTabActiveIndex == 1" :model="ruleForm" ref="ruleForm" class="demo-ruleForm" style="margin-top:20px; padding:0 17px;">
                        <el-form-item v-show="!fangdaStatus">
                            <div class="step-right-form-title">
                                <i class="iconfont icon-mubiao1"></i>案例目标
                                <!-- <div class="title-btn-box" v-if="ruleForm.projectTarget != ''" @click="addProjectContent(2)">
                                    <i class="iconfont icon-biji"></i>
                                </div> -->
                            </div>
                            <div v-if="ruleForm.projectTarget == ''" class="step-right-form-text">暂无目标</div>
                            <div v-else class="step-right-form-text">{{ ruleForm.projectTarget }}</div>
                        </el-form-item>
                        <el-form-item v-show="!tipsStatus && !fangdaStatus">
                            <div class="step-right-form-title">
                                <i class="iconfont icon-xiangmumingcheng"></i>当前步骤
                            </div>
                            <span class="step-right-form-text">{{ ruleForm.stepValue }}</span>
                        </el-form-item>
                        <!-- <el-form-item v-show="!tipsStatus &&  !fangdaStatus">
                            <div class="step-right-form-title">
                                <i class="iconfont icon-shipin"></i>步骤视频
                            </div>
                            <div class="upload-btn-box" v-if="ruleForm.uploadVideo == ''">
                                <img src="./../../assets/images/upload_icon2.png" /> 仅支持mp4格式上传
                                <input type="file" multiple="multiple" auto-complete="off" @change="getUploadVideo"></input>
                            </div>
                            <div class="upload-text-box" v-if="ruleForm.uploadVideo != ''">
                                <span>{{ ruleForm.uploadVideo }}</span>
                                <i class="iconfont icon-shanchu2" title="删除"  @click="deleteUploadVideo"></i>
                                <i class="iconfont icon-tihuan2" title="重新上传"><input type="file" multiple="multiple" auto-complete="off" @change="getUploadVideo" title="重新上传"></input></i>
                            </div>
                        </el-form-item>
                        <el-form-item v-show="!tipsStatus &&  !fangdaStatus">
                            <div class="step-right-form-title">
                                <i class="iconfont icon-shujuyuan"></i>步骤源码
                            </div>
                            <div class="upload-btn-box" v-if="ruleForm.uploadFile == ''">
                                <img src="./../../assets/images/upload_icon2.png" /> 仅支持zip格式上传
                                <input type="file" multiple="multiple" auto-complete="off" @change="getFile"></input>
                            </div>
                            <div class="upload-text-box" v-if="ruleForm.uploadFile != ''">
                                <span>{{ ruleForm.uploadFile }}</span>
                                <i class="iconfont icon-shanchu2" title="删除" @click="deleteUploadFile"></i>
                                <i class="iconfont icon-tihuan2" title="重新上传"><input type="file" multiple="multiple" auto-complete="off" @change="getFile" title="重新上传"></input></i>
                            </div>
                        </el-form-item> -->
                        <el-form-item class="step-right-form-tips" v-if="tipsStatus">
                            <div class="tips-box">
                                <img src="./../../assets/images/tips.png" />
                            </div>
                        </el-form-item>
                        <el-form-item v-show="!tipsStatus">
                            <div class="step-right-form-title">
                                <i class="iconfont icon-anli"></i>步骤说明
                                <div class="title-btn-box" @click="bigEditor">
                                    <i class="iconfont icon-fangda" v-if="!fangdaStatus"></i>
                                    <i class="iconfont icon-suoxiao1" v-else></i>
                                </div>
                                <el-button type="primary" @click="submitForm">保存</el-button>
                            </div>
                            <vue-wangeditor id="step-editor" :content="ruleForm.stepEtiorContent" :editorMenus="editorMenus" height="220" style="margin-top:20px;"></vue-wangeditor>
                            <!-- <div id="step-editor" style="margin-top:20px;">
                                <div id="step-editor-menu" style="line-height:24px;"></div>
                                <div id="step-editor-editor" style="width:auto; height:220px;"></div>
                                <input type="hidden" v-model="ruleForm.stepEtiorContent" id="step-editor-text" />
                            </div> -->
                        </el-form-item>
                        <el-form-item class="save-position">
                            <el-button v-if="editorOrAdd && stepActiveIndex > 0" type="primary"  @click="pageFn(-1)">上一页</el-button>
                            <el-button v-if="editorOrAdd && dynamicValidateForm.domains.length>1 && dynamicValidateForm.domains.length != (stepActiveIndex+1)" type="primary"  @click="pageFn(1)">下一页</el-button>
                        </el-form-item>
                    </el-form>
                    <el-form v-show="leftContentTabActiveIndex == 2" :model="ruleForm" ref="ruleForm" class="demo-ruleForm" style="margin-top:20px; padding:0 17px;">
                        <el-form-item>
                            <div class="step-right-form-title">
                                <i class="iconfont icon-dizhi"></i>数据采集信息
                            </div>
                            <div class="step-right-form-text" v-if="ruleForm.dataCollectAddress == null">暂无数据</div>
                            <div class="step-right-form-text" v-else v-for="item in ruleForm.dataCollectAddress">{{ item }}</div>
                        </el-form-item>
                        <el-form-item>
                            <div class="step-right-form-title">
                                <i class="iconfont icon-yuanshuju"></i>数据源说明
                            </div>
                            <div class="data-editor w-e-text" style="border:none; max-height:800px;"></div>
                        </el-form-item>
                    </el-form>
                    <el-form v-show="leftContentTabActiveIndex == 3" :model="ruleForm" ref="ruleForm" class="demo-ruleForm" style="margin-top:20px; padding:0 17px;">
                        <el-form-item>
                            <div class="environment-editor w-e-text" style="border:none; max-height:800px;"></div>
                        </el-form-item>
                    </el-form>
                </div>
                <div class="desktop-toggle" v-if="hideBtnStatus">
                    <span class="hide-desktop" @click="hideDesktop"><</span>
                    <span class="hide-doc" @click="hideDoc">></span>
                </div>
            </div>
        </div>
        <div class="step-main-mirror">
            <div class="mirror-iframe">
                <div class="mirror-iframe-box">
                    <!-- <iframe :src="desktopUrl" width="100%" :height="iframeHeight" frameborder="0"></iframe> -->
                    <iframe name="iframeitem" v-for="(item, index) in VirtualMachineUrlArr" :id="'VirtualMachineIframe' + item.containerId"  v-show="activeIndex == index" :src="item.desktopUrl" width="100%" :height="iframeHeight" frameborder="0"></iframe>
                </div>
            </div>
            <div class="step-main-mirror-dialog" :style="{right: mirrorRightData + 'px'}">
                <div class="step-main-mirror-dialog-box">
                    <div class="mirror-dialog-item" v-if="vmButton.refreshFlag || vmButton.replaceFlag || vmButton.choiceImageFlag || vmButton.saveImageFlag">
                        <div class="item-btn" v-if="vmButton.refreshFlag && hideBtnStatus" @click="initDesktop2(0)" title="重新对虚拟机桌面进行连接">
                            <i class="iconfont icon-refresh"></i>刷新
                        </div>
                        <div class="item-btn" @click="entryFullScreen" v-if="hideDesktopStatus && hideDocStatus">
                            <i class="iconfont icon-fangda"></i>桌面全屏
                        </div>
                        <!-- <div class="item-btn" @click="exitFullScreen" v-if="!entryFullStatus && hideDesktopStatus && hideDocStatus">
                            <i class="iconfont icon-fangda"></i>退出全屏
                        </div> -->
                        <div class="item-btn" v-if="vmButton.replaceFlag" @click="replaceVirtual(0)" title="虚机还原至当前“案例配置”，/data文件夹数据不受影响。">
                            <i class="iconfont icon-55"></i>初始化
                        </div>
                    </div>
                    <div class="mirror-dialog-item" v-if="vmButton.fileDownloadFlag || vmButton.choiceImageFlag || vmButton.clipboardFlag">
                    <div class="item-btn" v-if="vmButton.fileDownloadFlag && itemServiceType == 1"  @click="downloadFile">
                            <!-- <a :href="'/dataplatform/container/download?chapterId='+chapterId">
                                <i class="iconfont icon-unie122"></i>文件下載
                            </a> -->
                            <i class="iconfont icon-unie122"></i>文件下載
                        </div>
                        <div class="item-btn" v-if="vmButton.sftpFlag" @click="sftpDownload">
                            <i class="iconfont icon-zhongxinxuanze"></i>SFTP工具
                        </div>
                        <div class="item-btn" v-if="vmButton.trainingNotesFlag && projectType == 2" @click="notesFn">
                            <i class="iconfont icon-biji"></i>实训笔记
                        </div>
                        <div class="item-btn" v-if="vmButton.clipboardFlag" @click="cutFn">
                            <i class="iconfont icon-jianqieban"></i>剪切板
                        </div>
                    </div>
                    <div class="mirror-dialog-item" v-if="vmButton.openShareFlag || vmButton.closeShareFlag">
                        <div class="item-btn" v-if="vmButton.openShareFlag && itemServiceType == 1" @click="shareFn">
                            <i class="iconfont icon-fenxiang"></i>分享桌面
                        </div>
                        <div class="item-btn" v-if="vmButton.closeShareFlag && itemServiceType == 1" @click="closeShareFn">
                            <i class="iconfont icon-guanbifenxiang"></i>关闭分享
                        </div>
                    </div>
                    <div class="mirror-dialog-item last-item">
                        <div class="item-btn" v-for="(item, index) in desktopBtnList" :class="{ active : activeIndex == 0}">
                            <span @click="deskTopChange(index, item.containerId)" :class="{ active : activeIndex == index}">
                                <i class="iconfont icon-SliceCopy"></i>{{ item.clusterRole }}
                            </span>
                            <!-- <span v-else-if="item.clusterRole == 1" :class="{ active : activeIndex == 0}"  @click="deskTopChange(index)">
                                <i class="iconfont icon-SliceCopy"></i>主节点
                            </span>
                            <span v-else @click="deskTopChange(index)" :class="{ active : activeIndex == index}">
                                <i class="iconfont icon-SliceCopy"></i>从节点{{index}}
                            </span> -->
                        </div>
                    </div>
                    <div class="mirror-dialog-btn">
                        <button @click="outFn">退出<i class="iconfont icon-tuichu"></i></button>
                    </div>
                </div>
            </div>
            <div class="step-main-mirror-arrow" :style="{right: mirrorArrowData + 'px'}" @click="mirrorArrowFn">
                <div :class="{active:mirrorActiveData}">工具栏</div>
            </div>
            <div class="mirror-notes-box">
                <div class="notes-select-bar" @click="noteSelect">
                    <i class="iconfont icon-tongzhi"></i>
                    消息通知
                    <span v-if="notesData.length>0">{{notesData.length}}</span>
                </div>
                <div class="notes-content" :style="{ bottom: noteBottom  + 'px' }">
                    <div class="notes-content-close">
                        <i @click="noteSelect"></i>
                    </div>
                    <div class="notes-content-list">
                        <div class="notes-item" v-for="(item, index) in notesData" @click="noteDialog(item.desktopUrl, item.controllable, index)">
                            <span>{{ item.username }}</span>
                            <i class="iconfont icon-link"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <el-dialog
            class="add-project-target-dialog"
            :title="addTargetTitle"
            :visible.sync="projectTargetVisible"
            width='500px'>
            <el-input type="textarea" maxlength="500" @input="addTargetInput" v-model="addTargetValue"></el-input>
            <em>{{addTargetNumber}}/500</em>
            <div slot="footer" class="dialog-footer" style="text-align:center;">
                <el-button type="primary" @click="addTargetSave">保存</el-button>
            </div>
        </el-dialog>
        <el-dialog class="cut-dialog" title="剪切板" :visible.sync="cutDialogVisible">
            <div class="cut-title">
                <p><span>复制外部内容到实验环境内 : </span>粘贴内容到下方输入框一点击保存</p>
            </div>
            <el-form :model="cutData.cutRuleForm" :rules="cutData.cutRules" ref="cutRuleForm">
                <el-form-item prop="desc">
                    <el-input type="textarea" v-model="cutData.cutRuleForm.desc" style="height:200px;"></el-input>
                </el-form-item>
                <el-form-item style="text-align:center;">
                    <el-button type="primary" @click="cutSubmitForm('ruleForm')">保存</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
        <el-dialog class="share-dialog" title="分享桌面" :visible.sync="shareDialogVisible" width="500px">
            <el-form :model="shareData.shareRuleForm" :rules="shareData.shareRule" ref="shareRuleForm">
                <!-- <el-form-item label="教师">
                    <el-select
                        v-model="shareData.shareRuleForm.teacherValue"
                        multiple
                        collapse-tags
                        style="float:left;"
                        placeholder="请选择教师">
                        <el-option
                        v-for="item in shareData.shareRuleForm.teacherStatus"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item> -->
                <el-form-item label="选择用户">
                    <el-select
                        v-model="shareData.shareRuleForm.studentValue"
                        multiple
                        filterable
                        collapse-tags
                        style="float:left;"
                        placeholder="请搜索选择用户"
                        @change="selectAll(shareData.shareRuleForm.studentValue)">
                        <el-option
                        v-for="item in shareData.shareRuleForm.studentStatus"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="允许对方操作">
                    <el-radio-group v-model="shareData.shareRuleForm.resource">
                        <el-radio :label="0">否</el-radio>
                        <el-radio :label="1">是</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item style="text-align:center;">
                    <el-button type="primary" :disabled="shareDisabled" @click="shareSubmitForm('shareRuleForm')">保存</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
        <el-dialog class="sftp-dialog" title="SFTP工具" :visible.sync="sftpDialogVisible" width="50%">
            <div class="sftp-content">
                <div class="sftp-header">
                    <div class="sftp-title">
                        您可以使用SFTP工具上传、下载文件:
                    </div>
                    <p>SFTP访问的地址为 <span>{{ sftpData.ip }}</span> 端口号为 <span>{{ sftpData.port }}</span></p>
                    <p>用户名 : <span>root </span> 密码 : <span>root</span></p>
                </div>
                <div class="sftp-desc">
                    <div class="sftp-title">
                        使用说明
                    </div>
                    <div class="desc-item">
                        <p>1.请先下载SFTP工具
                            <a href="/dataplatform/container/downloadSFTPTools?type=64">
                                <i class="iconfont icon-unie122">
                                    <img src="./../../assets/images/sftp_icon1.png" />
                                </i>
                            </a>
                            <a href="/dataplatform/container/downloadSFTPTools?type=32">
                                <i class="iconfont icon-unie122">
                                    <img src="./../../assets/images/sftp_icon2.png" />
                                </i>
                            </a>
                        </p>
                        <p>2.使用登陆命令<span>open username@host post</span></p>
                        <p>说明：username为用户名 host 为主机地址，post为端口号</p>
                        <p>3.填写密码进入SFTP环境。</p>
                        <p>4.上传命令<span>put dir/something.txt dir/another.txt</span></p>
                        <p>说明：dir/something.txt 为用户当前环境的地址+文件。dir/another.txt为虚拟环境的地址加文件。</p>
                        <p>例如：命令 put D:/bigdata.sql /home/bigdata.sql 则是把本地D盘的bigdata.sql 文件上传至虚拟环境home 目录。</p>
                        <p>5.下载命令 <span>get dir/something.txt dir/another.txt</span></p>
                        <p>说明：dir/something.txt 为虚拟环境的地址加文件。dir/another.txt用户当前环境的地址+文件。</p>
                        <p>例如：命令 get /home/bigdata.sql  E:/bigdata.sql  则是把虚拟环境home 目录的bigdata.sql 文件下载至的本地E盘。</p>
                    </div>
                </div>
            </div>
            <div slot="footer" class="dialog-footer" style="text-align:center;">
                <el-button type="primary" @click="sftpDialogVisible = false">确定</el-button>
            </div>
        </el-dialog>
        <el-dialog class="notes-dialog" title="实训笔记" :visible.sync="notesDialogFormVisible">
            <!-- <div class="notes-title">
                {{ notesDataName }}
            </div> -->
            <div class="notes-content">
                <div class="notes-item" v-for="(item, index) in notesDataList" :key="index">
                    <div class="item-title">
                        <span>{{ index + 1 }}</span>
                        <span>{{ item.name }}</span>
                    </div>
                    <div class="item-content" v-html="item.instructions"></div>
                </div>
            </div>
            <div slot="footer" class="dialog-footer" style="text-align:center;">
                <el-button type="primary" @click="closeDialog">关闭</el-button>
            </div>
        </el-dialog>
        <el-dialog class="desktop-dialog" :visible.sync="notesDialogVisible" :fullscreen="true" @close="notesClose" :show-close="false">
            <div class="desktop-close"  style="margin-right:25px;" @click="notesDialogVisible = false">-</div>
            <div class="desktop-close" style="font-size:28px;"  @click="desktopClose">x</div>
            <div class="desktop-dialog-mask" v-if="!noteDialogControllable"></div>
            <iframe :src="noteDialogDesktopUrl" width="100%" :height="iframeHeight" frameborder="0"></iframe>
        </el-dialog>
        <el-dialog
            title="下载"
            :visible.sync="downloadDialogVisible"
            width="30%">
            <span>请将下载文件存放至根目录下/data文件夹中，文件下载将会对/data文件夹中的文件进行打包下载</span>
            <span slot="footer" class="dialog-footer">
                <a @click="fileDownCheck" style="background: #cc281a; font-size:14px; padding: 12px 20px; color: #fff; border-radius: 4px;">
                    确 定
                </a>
            </span>
        </el-dialog>
    </div>
    </div>
</template>

<script>
    import vueWangeditor from '@/components/vueWangeditor.vue'
    // import E from 'wangeditor'
    export default {
        components: {
            vueWangeditor
        },
        data() {
            return {
                contentLoading: null,
                //用户ID
                userId: '',
                //获取虚机地址IP
                projectAccessUrl: '',
                //項目ID
                projectId: '',
                //章节ID
                chapterId: '',
                //导航类型
                itemServiceType: '',
                //案例类型1预置2自定义区分是编辑或展示
                projectType: '',
                //项目名称
                projectName: '',
                //左侧菜单表单
                dynamicValidateForm: {
                    domains: [{
                        id: 0,
                        value: '',
                        size: 50
                    }],
                    domains2: [{
                        id: 0,
                        value: '',
                        size: 50
                    }]
                },
                //加载
                Loading:false,
                editorOrAdd: false,
                cancelSaveStatus: false,
                activeData: true,
                leftData: -210,
                //左侧引导显示状态
                tipsStatus: '',
                //左侧step标记
                stepActiveIndex: 0,
                stepId: '',
                stepItemId: '',
                stepSaveId: '',
                //左侧内容tab标记
                leftContentTabActiveIndex: 1,
                //左侧内容未制作状态显示
                tipsStatus: '',
                //添加案例目标弹窗显示
                projectTargetVisible: false,
                addTargetType: '',
                addTargetValue: '',
                addTargetTitle: '',
                addTargetNumber: 500,
                editorContent: '',
                //左侧步骤说明放大缩小状态
                fangdaStatus: false,
                //左侧步骤编辑器宽高
                stepEditorHeight: {
                    borderTop: 'solid 1px #bfbfbf',
                    maxHeight: '220px'
                },
                //左侧表单form
                ruleForm: {
                    projectTarget: '',
                    stepValue: '',
                    uploadVideo: '',
                    uploadFile: '',
                    stepEtior: null,
                    stepEtiorContent: '',
                    dataEtiorContent: '',
                    environmentEtiorContent: '',
                    //数据采集信息
                    dataCollectAddress: '',
                    dataCollectionInfo: '',
                    dataCollectAddressNumber: 200
                },
                editorMenus: [          // 菜单配置
                    'bold',  // 粗体
                    'italic',  // 斜体
                    'link',  // 插入链接
                    'list',  // 列表
                    'quote',  // 引用
                    'image',  // 插入图片
                    'table',  // 表格
                ],
                //桌面url
                desktopUrl: '',
                //桌面iD
                desktopId: 1,
                //虚机切换节点
                nodeIndex: 0,
                //虚机右侧节点切换active Index
                activeIndex: 0,
                //桌面loading
                deskLoading: false,
                deskLoadingText: '桌面加載中',
                iframeHeight: '',
                mirrorRightData: 0,
                mirrorArrowData: 150,
                mirrorActiveData: true,
                //右侧菜单按钮集合
                vmButton: '',
                desktopBtnList: [],
                //文件下载
                downloadDialogVisible: false,
                //剪切板
                cutDialogVisible: false,
                cutData: {
                    cutRuleForm: {
                        desc: ''
                    },
                    cutRules: {
                        desc: [
                            { required: true, message: '请填写内容', trigger: 'blur' }
                        ]
                    }
                },
                //分享桌面
                shareDialogVisible: false,
                shareDisabled: false,
                shareData: {
                    shareRuleForm: {
                        // teacherStatus: [],
                        // teacherValue: [],
                        oldOptions: [
                            {
                                value: '全选',
                                label: '全选'
                            }
                        ],
                        studentStatus: [
                           {
                                value: '全选',
                                label: '全选'
                            }
                        ],
                        studentValue: [],
                        resource: 1
                    },
                    shareRule: {
                        studentValue: [
                            { required: true, message: '请选择学生', trigger: 'change' }
                        ],
                        // teacherValue: [
                        //     { required: true, message: '请选择教师', trigger: 'change' }
                        // ]
                    }
                },
                //实训笔记
                notesDialogFormVisible: false,
                notesDataName: '',
                notesDataList: '',
                //sftp
                sftpDialogVisible: false,
                sftpData: {
                    ip: '',
                    port: ''
                },
                //消息通知
                noteBottom: -144,
                notesData: [],
                notesDialogVisible: false,
                noteDialogDesktopUrl: '',
                noteDialogControllable: '',
                noteDialogIndex: '',
                //实验时长
                longTimewebsock: null,
                longTimeOver: null,
                //通知消息
                websock: null,
                over: null,
                hideDesktopStatus: true,
                hideDocStatus: true,
                hideDesktopStatusValue: 1,
                hideDocStatusValue: 1,
                timers: null,
                //全屏状态
                entryFullStatus: true,
                hideBtnStatus: true,

                // 新增更改
                // 虚机数组
                VirtualMachineUrlArr: [],
                //判断类型
                types:'',

                 //标识
                tab:''

               
            }
        },
        created () {
            let self = this
            //判断是哪里来的
            self.types = this.$route.query.type
            //章节ID
            this.chapterId = this.$store.state.chapterType
            //用户ID
            this.userId = JSON.parse(window.localStorage.getItem('access-user')).id
            //获取虚机地址IP
            this.projectAccessUrl = JSON.parse(window.localStorage.getItem('access-user')).projectAccessUrl
            //項目ID
            this.projectId = JSON.parse(window.localStorage.getItem('teacher-project-id')).itemId
            //导航类型
            this.itemServiceType = this.$store.state.itemServiceType
            //案例类型1预置2自定义
            this.projectType = JSON.parse(window.localStorage.getItem('teacher-project-id')).type
            //yx 新加的值
            this.tab = this.$store.state.projectType
            
            

            this.init()   //页面初始化
            this.initDesktop(0)  //初始化进入桌面
            // this.$nextTick(function () {
            //     this.iframeHeight = $('body').height()
            //     var timers = setInterval(function() {
            //         $(".mirror-iframe-box").width((1024 / 768) * ($(window).height()));
            //         $(".step-main-content").width($(window).width() - $(".mirror-iframe-box").width() - 1);
            //     }, 50);
            //     if(window.screen.width < 1280){
            //         clearInterval(timers);
            //         $(".mirror-iframe-box").css("width","100%");
            //         $(".step-main-content").hide();
            //     }
            // })
            console.log(window.screen.width,213)
            self.$nextTick(function () {
                self.iframeHeight = $('body').height()
                $(".mirror-iframe-box").width((1024 / 768) * ($(window).height()));
                $('.step-main-content-parent').width($(window).width() - $(".mirror-iframe-box").width() - 1)
                $(".step-main-content").width($(window).width() - $(".mirror-iframe-box").width() - 1);
                $('.step-right').height($(window).height())
                window.onresize = function () {
                    $(".mirror-iframe-box").width((1024 / 768) * ($(window).height()));
                    $('.step-main-content-parent').width($(window).width() - $(".mirror-iframe-box").width() - 1)
                    $(".step-main-content").width($(window).width() - $(".mirror-iframe-box").width() - 1)
                    if (self.isFullScreen() == true) {
                        self.hideBtnStatus = false
                    }else{
                        self.hideBtnStatus = true
                    }
                }
                // self.timers = setInterval(function() {
                //     $(".mirror-iframe-box").width((1024 / 768) * ($(window).height()));
                //     $(".step-main-content").width($(window).width() - $(".mirror-iframe-box").width() - 1);
                // }, 50);
                if(window.screen.width <= 1280){
                    // clearInterval(self.timers);
                    // if(window.screen.width <= 1024){
                    //     // clearInterval(self.timers);
                    //     $(".mirror-iframe-box").width((1024 / 768) * ($(window).height()));
                    //     $('.step-main-content-parent').width(0)
                    //     $('.step-main-content').width(0)
                    //     // $('.step-main-content-parent').width($(window).width() - $(".mirror-iframe-box").width() - 1)
                    //     // $(".step-main-content").width($(window).width() - $(".mirror-iframe-box").width() - 1)
                    //     return
                    // }
                    alert(1)
                    $(".step-main-mirror").css({
                        'float': 'none',
                        'width': (1024 / 768) * ($(window).height()),
                        'margin': '0 auto'
                    });
                    $(".step-main-content-parent").width(0)
                    $('.step-main-content').width(0)
                    $('.step-main-content .step-right').css({
                        'padding': 0
                    })
                    this.hideDocStatus = false
                }
            })
            //通知
            this.initWebSocket()

            if (self.$route.path == '/student/projectTrainingStep') {
                history.pushState(null, null, document.URL);
                window.addEventListener('popstate', function () {
                    history.pushState(null, null, document.URL);
                })
            }
        },
        
        mounted () {
            let self = this
            $(document).on('keydown', function () {
                var e = event || window.event || arguments.callee.caller.arguments[0]

                if(e && e.keyCode == 122){
                    e.preventDefault()
                    var el = document.documentElement;
                    var rfs = el.requestFullScreen || el.webkitRequestFullScreen || el.mozRequestFullScreen || el.msRequestFullScreen;//定义不同浏览器的全屏API

                    document.addEventListener("webkitfullscreenchange", function() {//
                        if (document.webkitIsFullScreen) {
                            //全屏后要执行的代码
                            let docE = document.documentElement;
                            if (docE.requestFullScreen) {
                                docE.requestFullScreen();
                            } else if (docE.mozRequestFullScreen) {
                                docE.mozRequestFullScreen();
                            } else if (docE.webkitRequestFullScreen) {
                                docE.webkitRequestFullScreen();
                            }
                            if (self.hideDesktopStatus && self.hideDocStatus) {
                                $(".mirror-iframe-box").css({
                                    'width': '100%',
                                    'height': '100%'
                                })
                                $('.mirror-iframe').css({
                                    'height': '100%'
                                })
                                $('.mirror-iframe iframe').css({
                                    'height': '100%'
                                })
                           
                                $('.step-main-mirror').css({
                                    
                                    'width': $(window).width() - $('.step-main-content-parent').width()
                                })
                            }
                            self.entryFullStatus = false
                            self.hideBtnStatus = false
                        }else{
                            self.entryFullStatus = true
                            self.hideBtnStatus = true
                    　　}
                    }, false);
                }
            })
        },
        destroyed: function() {
            //页面销毁时关闭长连接
            if(this.itemServiceType == 1){
                this.longTimeOver()
            }
            this.over()
        },
        methods: {
            //通知webSocket
            initWebSocket(){
                var type = this.$store.state.projectType
                // const wsuri = "ws://"+this.projectAccessUrl+"/dataplatform/webSocket/desktop/"+this.userId+'/'+this.projectId;
                const wsuri = "ws://"+this.projectAccessUrl+"/dataplatform/webSocket/desktop/type/"+type+"/user/"+this.userId+"/item/"+this.projectId
                this.websock = new WebSocket(wsuri);
                this.websock.onopen = this.websocketonopen;
                this.websock.onmessage = this.websocketonmessage;
                this.over = () => {
                    this.websock.close()
                }
            },
            websocketonopen(){
                console.log('open sucess')
            },
            websocketonmessage(e){ //数据接收
                const redata = JSON.parse(e.data)
                let redataJson = {}
                redataJson.desktopUrl = redata.desktopUrl
                redataJson.username = redata.username
                redataJson.controllable = redata.controllable
                redataJson.containerId = redata.containerId
                redataJson.stuorteaId = redata.stuorteaId
                redataJson.roleId = redata.role
                if (redata.type == 1) {
                    for (let i = 0; i < this.notesData.length; i++) {
                        if(redata.stuorteaId == this.notesData[i].stuorteaId){
                            this.$message({
                                message: '接收的分享状态有变更',
                                type: 'warning'
                            })
                            this.notesDialogVisible =  false
                            this.notesData.splice(i, 1)
                        }
                    }
                    this.notesData.push(redataJson)
                }else if(redata.type == 2){
                    for (let i = 0; i < this.notesData.length; i++) {
                        if(redata.stuorteaId == this.notesData[i].stuorteaId){
                            if (this.notesDialogVisible) {
                                this.$message({
                                    message: '当前分享已关闭',
                                    type: 'warning'
                                })
                                this.notesDialogVisible =  false
                            }
                            this.notesData.splice(i, 1)
                        }
                    }
                    if (this.notesData.length == 0) {
                        this.noteBottom = -144
                    }
                }else if(redata.type == 3){
                    this.$message({
                        message: '分享已禁用',
                        type: 'warning'
                    })
                    this.notesData = []
                    this.notesDialogVisible =  false
                }else if(redata.type == 5){
                    for (let i = 0; i < this.notesData.length; i++) {
                        if(this.notesData[i].roleId == 2){
                            if (this.notesDialogVisible) {
                                this.$message({
                                    message: '教师已停用分享功能',
                                    type: 'warning'
                                })
                                this.notesDialogVisible =  false
                            }
                            this.notesData.splice(i, 1)
                        }
                    }
                    if (this.notesData.length == 0) {
                        this.noteBottom = -144
                    }
                }else if(redata.type == 6){
                    for (let i = 0; i < this.notesData.length; i++) {
                        if(this.notesData[i].roleId == 1){
                            if (this.notesDialogVisible) {
                                this.$message({
                                    message: '教师已停用分享功能',
                                    type: 'warning'
                                })
                                this.notesDialogVisible =  false
                            }
                            this.notesData.splice(i, 1)
                        }
                    }
                    if (this.notesData.length == 0) {
                        this.noteBottom = -144
                    }
                }
            },
            //页面初始化
            init(){
                let self = this
                self.$http.get('/dataplatform/chapter/step/chapterStepData?chapterId='+self.chapterId+'&itemServiceType='+self.itemServiceType).then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        self.vmButton = res.data.vmButton
                        self.tipsStatus = true
                        self.editorOrAdd = false
                        self.ruleForm.projectTarget = res.data.chapterVO.target
                        self.projectName = res.data.itemName
                        if(res.data.stepList.list.length == 0){
                            self.cancelSaveStatus = false
                        }
                        if(res.data.stepList.list.length > 0){
                            self.cancelSaveStatus = true
                            self.stepId = res.data.stepList.list[0].id
                            self.stepSaveId = res.data.stepList.list[0].id
                            self.ruleForm.stepValue = res.data.stepList.list[0].name
                            self.editorOrAdd = true
                            self.stepActiveIndex = 0
                            self.tipsStatus = false
                            self.dynamicValidateForm.domains = []
                            self.dynamicValidateForm.domains2 = []
                            for (let i = 0; i < res.data.stepList.list.length; i++) {
                                let listJson = {}
                                listJson.id = res.data.stepList.list[i].id
                                listJson.value = res.data.stepList.list[i].name
                                listJson.size = 50 - res.data.stepList.list[i].name.length
                                self.dynamicValidateForm.domains.push(listJson)
                                self.dynamicValidateForm.domains2.push(listJson)
                            }
                            self.dynamicValidateForm.domains2 = JSON.parse(JSON.stringify(self.dynamicValidateForm.domains2));
                            self.editorInit()   //編輯器初始化
                        }
                    }else if(res.code == '401'){
                        self.$router.replace({
                            path:'/login'
                        })
                    }else{
                        self.$message.error(res.message)
                    }
                })
            },
            //初始化编辑数据
            editorInit(){
                let self = this
                let stepId
                if(self.leftContentTabActiveIndex == 1){
                    stepId = self.stepSaveId
                }else if(self.leftContentTabActiveIndex == 2 || self.leftContentTabActiveIndex == 3){
                    stepId = 0
                }
                self.$http.get('/dataplatform/chapter/step/getItemExtendInfo?chapterId='+self.chapterId+'&stepType='+self.leftContentTabActiveIndex+'&itemServiceType='+self.itemServiceType+'&stepId='+stepId).then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        if(self.leftContentTabActiveIndex == 1){
                            if(res.data.codeName != null){
                                self.ruleForm.uploadFile = res.data.codeName
                            }
                            if(res.data.videoName != null){
                                self.ruleForm.uploadVideo = res.data.videoName
                            }
                            self.ruleForm.stepEtiorContent = res.data.instructions
                            if (self.ruleForm.stepEtiorContent == '') {
                                    $('.step-editor').css('display','none')
                            }
                            $('.step-editor').html(res.data.instructions)
                            // self.$nextTick(() => {
                            //     self.stepEtiorCatchData()
                            // })
                        }else if(self.leftContentTabActiveIndex == 2){
                            self.ruleForm.dataCollectAddress = res.data.dataCollectAddress
                            self.ruleForm.dataCollectionInfo = res.data.dataCollectionInfo
                            self.ruleForm.dataCollectAddressNumber = 200 - res.data.dataCollectionInfo.length
                            self.ruleForm.dataEtiorContent = res.data.data
                            if(res.data.data == ''){
                                $('.data-editor').html('暂无数据')
                            }else{
                                $('.data-editor').html(res.data.data)
                            }
                        }else if(self.leftContentTabActiveIndex == 3){
                            self.ruleForm.environmentEtiorContent = res.data.data
                            if(res.data.data == ''){
                                $('.environment-editor').html('暂无数据')
                            }else{
                                $('.environment-editor').html(res.data.data)
                            }
                        }
                        // setTimeout(() => {
                        //     self.deskLoading = false
                        // }, 2000);
                        if(self.contentLoading != null){
                            self.contentLoading.close()
                        }
                    }else if(res.code == '401'){
                        if(self.contentLoading != null){
                            self.contentLoading.close()
                        }
                        self.deskLoading = false
                        self.$router.replace({
                            path:'/login'
                        })
                    }else{
                        self.deskLoading = false
                        if(self.contentLoading != null){
                            self.contentLoading.close()
                        }
                        self.$message.error(res.message)
                    }
                })
            },
            selectAll(val){
                let allValues = []

                //保留所有值
                for (let item of this.shareData.shareRuleForm.studentStatus) {
                    allValues.push(item.value)
                }

                // 用来储存上一次的值，可以进行对比
                const oldVal = this.shareData.shareRuleForm.oldOptions.length === 1 ? [] : this.shareData.shareRuleForm.oldOptions[1]

                // 若是全部选择
                if (val.includes('全选')) this.shareData.shareRuleForm.studentValue = allValues

                // 取消全部选中  上次有 当前没有 表示取消全选
                if (oldVal.includes('全选') && !val.includes('全选')) this.shareData.shareRuleForm.studentValue = []

                // 点击非全部选中  需要排除全部选中 以及 当前点击的选项
                // 新老数据都有全部选中
                if (oldVal.includes('全选') && val.includes('全选')) {
                    const index = val.indexOf('全选')
                    val.splice(index, 1) // 排除全选选项
                    this.shareData.shareRuleForm.studentValue = val
                }

                //全选未选 但是其他选项全部选上 则全选选上 上次和当前 都没有全选
                if (!oldVal.includes('全选') && !val.includes('全选')) {
                    console.log(11)
                    if (val.length === allValues.length - 1) this.shareData.shareRuleForm.studentValue = ['全选'].concat(val)
                }

                //储存当前最后的结果 作为下次的老数据
                this.shareData.shareRuleForm.oldOptions[1] = this.shareData.shareRuleForm.studentValue
            },
            //步骤说明
            stepEtiorCatchData(){
                this.ruleForm.stepEtior = new E('#step-editor-menu', '#step-editor-editor')
                this.ruleForm.stepEtior.customConfig.onchange = (html) => {
                    this.ruleForm.stepEtiorContent = html
                }
                this.ruleForm.stepEtior.customConfig.zIndex = 100
                this.ruleForm.stepEtior.customConfig.uploadImgShowBase64 = true
                this.ruleForm.stepEtior.customConfig.menus = this.editorMenus
                this.ruleForm.stepEtior.create()     // 创建富文本实例
                this.ruleForm.stepEtior.txt.html(this.ruleForm.stepEtiorContent)
            },
            //初始化进入桌面
            initDesktop(index){
                let self = this
                self.deskLoading = true
                self.deskLoadingText = '桌面加載中'
                self.desktopUrl = ''
                self.VirtualMachineUrlArr = []
                let path
                if(self.projectType == 1){
                    path = '/dataplatform/container/desktop?experimentId='+self.projectId+'&chapterId='+self.chapterId
                }else if(self.projectType == 2){
                    // path = '/dataplatform/image/desktop?experimentId='+self.projectId+'&practiceMode=true'
                    path = '/dataplatform/container/desktop?experimentId='+self.projectId+'&chapterId='+self.chapterId+'&practiceMode=true'
                }
                self.$http.get(path).then(response => {
                    let res = response.data
                    // self.desktopUrl = ''
                    // self.VirtualMachineUrlArr = []
                    self.desktopId = ''
                    if(res.code == '200'){
                        if(self.itemServiceType == 1){
                            self.longTimeInitWebSocket()
                        }
                        self.desktopBtnList = res.data.desktopList

                        if(res.data.desktopList[index] == undefined){
                            return
                        }

                        self.activeIndex = index
                        self.desktopUrl = res.data.desktopList[index].desktopUrl
                        self.VirtualMachineUrlArr = res.data.desktopList
                        self.desktopId = res.data.desktopList[index].containerId
                        self.nodeIndex = index
                        setTimeout(() => {
                            self.deskLoading = false
                        }, 2000);
                    }else if(res.code == '401'){
                        self.deskLoading = false
                        self.$router.replace({
                            path:'/login'
                        })
                    }else{
                        self.deskLoading = false
                        self.$message.error(res.message)
                    }
                })
            },
            //22222
            initDesktop2(index){
               let self = this
                let path
                //1教学模式
                if(self.tab == 1){
                    path = '/dataplatform/container/desktop?experimentId='+self.projectId+'&chapterId='+self.chapterId
                }else if(self.tab == 2){
                    path = '/dataplatform/container/desktop?experimentId='+self.projectId+'&chapterId='+self.chapterId+'&practiceMode=true'
                }
                self.deskLoading = true
                self.deskLoadingText = '刷新中'
                self.desktopBtnList = ''
                self.VirtualMachineUrlArr = ''
                self.$http.get(path).then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        self.deskLoading = false
                        self.$message({
                            type: 'success',
                            message: '刷新成功!'
                        })
                        self.activeIndex = index
                        self.desktopBtnList = res.data.desktopList
                        self.desktopUrl = res.data.desktopList[index].desktopUrl
                        self.VirtualMachineUrlArr = res.data.desktopList
                        self.desktopId = res.data.desktopList[index].containerId
                        self.nodeIndex = index
                    }else if(res.code == '401'){
                        self.deskLoading = false
                        self.$router.replace({
                            path:'/login'
                        })
                    }else{
                        self.deskLoading = false
                        self.$message.error(res.message)
                    }
                })
                
            },
            //镜像切换
            deskTopChange(index,containerId){
                let self = this
                self.activeIndex = index
                // self.initDesktop(index)
                self.desktopId = containerId
            },
            //WebSocket实验记时
            longTimeInitWebSocket(){ //初始化weosocket
                const wsuri = "ws://"+this.projectAccessUrl+"/dataplatform/saveExperimentTime/"+this.userId+'/'+this.projectId;
                this.longTimewebsock = new WebSocket(wsuri);
                this.longTimewebsock.onmessage = this.longTimeInitWebsocketonmessage;
                this.longTimeOver = () => {
                    this.longTimewebsock.close()
                }
            },
            longTimeInitWebsocketonmessage(e){ //数据接收
                console.log(e.data)
            },
            stepCatchData (value){
                this.ruleForm.stepEtiorContent = value      //在这里接受子组件传过来的参数，赋值给data里的参数
            },
            dataCatchData (value){
                this.ruleForm.dataEtiorContent = value      //在这里接受子组件传过来的参数，赋值给data里的参数
            },
            environmentCatchData (value){
                this.ruleForm.environmentEtiorContent = value      //在这里接受子组件传过来的参数，赋值给data里的参数
            },
            //左侧菜单设置步骤
            settingFn(){
                for(let i = 0; i < this.dynamicValidateForm.domains.length; i++){
                    if(this.dynamicValidateForm.domains[i].value == ''){
                        this.$message.error('请填写步骤')
                        return;
                    }
                }
                if(this.editorOrAdd == false){
                    this.editorOrAdd = true
                }else{
                    this.editorOrAdd = false
                }
            },
            //流程字数限制
            flowInput(item){
                var index = this.dynamicValidateForm.domains.indexOf(item)
                var txtVal = this.dynamicValidateForm.domains[index].value.length;
                this.dynamicValidateForm.domains[index].size = 50 - txtVal
            },
            //左侧菜单动画
            arrowFn() {
                let self = this
                if(this.leftData == -210){
                    this.leftData = 0
                    this.activeData = false
                }else{
                    this.leftData = -210
                    this.activeData = true
                    if (self.dynamicValidateForm.domains[0].id == 0 && !self.cancelSaveStatus) {
                        self.dynamicValidateForm.domains = [
                            {
                                id: 0,
                                value: '',
                                size: 50
                            }
                        ]
                        return
                    }
                    this.dynamicValidateForm.domains = JSON.parse(JSON.stringify(this.dynamicValidateForm.domains2))
                    this.clearValidate('dynamicValidateForm')
                    this.editorOrAdd = true
                }
            },
            //左侧菜单添加dom
            addDomain() {
                this.dynamicValidateForm.domains.push({
                    value: '',
                    id: 0,
                    size: 50,
                    key: Date.now()
                })
            },
            //左侧菜单移除dom
            removeDomain(item) {
                var index = this.dynamicValidateForm.domains.indexOf(item)
                if (index !== -1) {
                    this.dynamicValidateForm.domains.splice(index, 1)
                }
            },
            //step表单提交
            saveForm(formName) {
                let self = this
                self.$refs[formName].validate((valid) => {
                    if (valid) {
                        let stepList = []
                        for (let i = 0; i < self.dynamicValidateForm.domains.length; i++) {
                            let stepJson = {}
                            stepJson.id = self.dynamicValidateForm.domains[i].id
                            stepJson.name = self.dynamicValidateForm.domains[i].value
                            stepList.push(stepJson)
                        }
                        self.$http.post('/dataplatform/chapter/step/updateStepName',{
                            chapterId: self.chapterId,
                            stepList: stepList
                        }).then(response => {
                            let res = response.data
                            if(res.code == '200'){
                                self.$message({
                                    message: '保存成功',
                                    type: 'success'
                                })
                                self.editorOrAdd = true
                                self.init()
                            }else if(res.code == '401'){
                                self.$router.replace({
                                    path:'/login'
                                })
                            }else{
                                self.$message.error(res.message)
                            }
                        })
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            //取消保存
            cancelSave(){
                this.dynamicValidateForm.domains = JSON.parse(JSON.stringify(this.dynamicValidateForm.domains2))
                this.clearValidate('dynamicValidateForm')
                this.editorOrAdd = true
            },
            clearValidate(formName) {
                this.$refs[formName].clearValidate();
            },
            //左侧内容tab切换
            letContentTab(value){
                this.leftContentTabActiveIndex = value
                this.contentLoading = this.$loading({
                    lock: true,
                    text: '加载中',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.7)'
                })
                this.editorInit()
            },
            //步驟翻页
            pageFn(page){
                let self = this
                self.Loading = this.$loading({
                    lock: true,
                    text: '加载中',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.7)'
                })
                if(page == 1){
                    if(self.stepActiveIndex == (self.dynamicValidateForm.domains.length - 1)){
                        self.stepActiveIndex = 0
                        self.stepId = self.dynamicValidateForm.domains[self.dynamicValidateForm.domains.length - 1].id
                        self.stepSaveId = self.dynamicValidateForm.domains[0].id
                        self.ruleForm.stepValue =self.dynamicValidateForm.domains[0].value
                    }else{
                        self.stepActiveIndex = self.stepActiveIndex+1
                        self.stepId = self.dynamicValidateForm.domains[self.stepActiveIndex - 1].id
                        self.stepSaveId = self.dynamicValidateForm.domains[self.stepActiveIndex].id
                        self.ruleForm.stepValue = self.dynamicValidateForm.domains[self.stepActiveIndex].value
                    }
                }else if(page == -1){
                    if(self.stepActiveIndex - 1 == 0){
                        self.stepActiveIndex = 0
                        self.stepId = self.dynamicValidateForm.domains[1].id
                        self.stepSaveId = self.dynamicValidateForm.domains[0].id
                        self.ruleForm.stepValue = self.dynamicValidateForm.domains[0].value
                    }else{
                        self.stepActiveIndex = self.stepActiveIndex - 1
                        self.stepId = self.dynamicValidateForm.domains[self.stepActiveIndex+1].id
                        self.stepSaveId = self.dynamicValidateForm.domains[self.stepActiveIndex].id
                        self.ruleForm.stepValue = self.dynamicValidateForm.domains[self.stepActiveIndex].value
                    }
                }
                let stepEtiorContentText
                if (self.projectType == 2) {
                    stepEtiorContentText = document.getElementById('step-editor-text').value
                }else if(self.projectType == 1){
                    stepEtiorContentText = self.ruleForm.stepEtiorContent
                }
                self.$http.post('/dataplatform/chapter/step/updateAndGetStep',{
                    tabType: page,
                    id: self.stepId,
                    itemServiceType: self.itemServiceType,
                    instructions: stepEtiorContentText
                }).then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        if (res.data.instructions == '' || res.data.instructions == '<p><br></p>') {
                            $('#step-editor-editor .w-e-text').html('')
                        }

                        self.ruleForm.stepEtiorContent = res.data.instructions
                        if (self.projectType == 2) {
                            document.getElementById('step-editor-text').value = res.data.instructions
                        }
                        self.ruleForm.uploadFile = res.data.codeName == null ? '' : res.data.codeName
                        self.ruleForm.uploadVideo = res.data.videoName == null ? '' : res.data.videoName
                        if(self.projectType == 1){
                            $('.step-editor').html(res.data.instructions)
                            self.$nextTick(()=>{
                                if (self.ruleForm.stepEtiorContent == '') {
                                    $('.step-editor').css('display','none')
                                }else{
                                    $('.step-editor').css('display','block')
                                }
                            })
                        }

                        // self.$nextTick(() => {
                        //     self.stepEtiorCatchData()
                        // })
                     self.Loading.close()
                    }else if(res.code == '401'){
                        self.Loading.close()
                        self.$router.replace({
                            path:'/login'
                        })
                    }else{
                        self.Loading.close()
                        self.$message.error(res.message)
                    }

                })
            },
            //添加内容type==1添加type==2编辑
            addProjectContent(type){
                if(type == 1){
                    this.addTargetTitle = '添加案例目标'
                    this.addTargetType = 1
                    this.addTargetValue = ''
                    this.addTargetNumber = 500
                }else{
                    this.addTargetTitle = '编辑案例目标'
                    this.addTargetType = 2
                    this.addTargetValue = this.ruleForm.projectTarget
                    this.addTargetNumber = 500 - this.ruleForm.projectTarget.length
                }
                this.projectTargetVisible = true
            },
            addTargetInput(){
                var txtVal = this.addTargetValue.length;
                this.addTargetNumber = 500 - txtVal
            },
            //视频下载
            videoDown(){
                let self = this
                let uploadVideo = decodeURI(self.ruleForm.uploadVideo)
                self.$http.get('/dataplatform/common/fileDownload?path='+uploadVideo).then(response => {
                    let res = response.data
                    if(res.code == '200'){
                    }else if(res.code == '401'){
                        self.$router.replace({
                            path:'/login'
                        })
                    }else{
                        self.$message.error(res.message)
                    }
                })
            },
            //案例目标保存
            addTargetSave(){
                let self = this
                self.$http.post('/dataplatform/chapter/updateTarget',{
                    itemId: self.projectId,
                    target: self.addTargetValue
                }).then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        if(this.addTargetType == 1){
                            self.$message({
                                message: '保存',
                                type: 'success'
                            })
                        }else if(this.addTargetType == 2){
                            self.$message({
                                message: '编辑成功',
                                type: 'success'
                            })
                        }
                        self.init()
                        self.projectTargetVisible = false
                    }else if(res.code == '401'){
                        self.$router.replace({
                            path:'/login'
                        })
                    }else{
                        self.$message.error(res.message)
                    }
                })
            },
            //上传视频
            getUploadVideo($event){
                let self = this
                let isLt2M = $event.target.files[0].size / 1024 / 1024 < 500
                let fileType = $event.target.files[0].name
                    fileType = fileType.substring((fileType.lastIndexOf('.') + 1), fileType.length)
                if(!isLt2M){
                    self.$message.error('上传文件大小不能超过 500MB!')
                    return false
                }
                console.log(fileType)
                if(fileType != 'mp4' && fileType != 'avi' && fileType != 'rmvb' && fileType != 'ts'){
                    self.$message.error('请上传mp4,avi,rmvb,ts格式的文件!')
                    return false
                }
                let fd = new FormData()
                    fd.append('files', $event.target.files[0])
                const loading = this.$loading({
                    lock: true,
                    text: '正在上传中',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.7)'
                })
                self.$http.post('/dataplatform/common/upload/file',fd, {headers: {'Content-Type': 'multipart/form-data'}}).then(response => {
                    let res = response.data

                    if(res.code == '200'){
                        loading.close()
                        self.$message({
                            message: '上传成功',
                            type: 'success'
                        })
                        self.ruleForm.uploadVideo = res.data[0].fileName
                        self.updateStepVideo()
                    }else if(res.code == '401'){
                        loading.close()
                        self.$router.replace({
                            path:'/login'
                        })
                    }else{
                        loading.close()
                        self.$message.error(res.message)
                    }
                })
            },
            //删除上传的视频
            deleteUploadVideo(){
                let self = this
                self.$confirm('是否删除?', '提示', {
                    confirmButtonClass: 'el-button--warning'
                }).then(() => {
                    self.updateStepVideo(1)
                }).catch(() => {});
            },
            //
            updateStepVideo(type){
                let self = this
                let data = {}
                if(type == 1){
                    data = {
                        id: self.stepSaveId,
                        videoName: ''
                    }
                }else{
                    data = {
                        id: self.stepSaveId,
                        videoName: self.ruleForm.uploadVideo
                    }
                }
                self.$http.post('/dataplatform/chapter/step/updateStepVideo', data).then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        if(type == 1){
                            self.ruleForm.uploadVideo = ''
                            self.$message({
                                message: '删除成功',
                                type: 'success'
                            })
                        }
                    }else if(res.code == '401'){
                        self.$router.replace({
                            path:'/login'
                        })
                    }else{
                        self.$message.error(res.message)
                    }
                })
            },
            //上传步骤源码
            getFile($event) {
                let self = this
                let isLt2M = $event.target.files[0].size / 1024 / 1024 < 500
                let fileType = $event.target.files[0].name
                    fileType = fileType.substring((fileType.lastIndexOf('.') + 1), fileType.length)
                if(!isLt2M){
                    self.$message.error('上传文件大小不能超过 500MB!')
                    return false
                }
                if(fileType != 'zip'){
                    self.$message.error('请上传zip格式的文件!')
                    return false
                }
                let fd = new FormData()
                    fd.append('files', $event.target.files[0])
                const loading = this.$loading({
                    lock: true,
                    text: '正在上传中',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.7)'
                })
                self.$http.post('/dataplatform/common/upload/file',fd, {headers: {'Content-Type': 'multipart/form-data'}}).then(response => {
                    let res = response.data

                    if(res.code == '200'){
                        loading.close()
                        self.$message({
                            message: '上传成功',
                            type: 'success'
                        })
                        self.ruleForm.uploadFile = res.data[0].fileName
                        self.updateStepCode()
                    }else if(res.code == '401'){
                        loading.close()
                        self.$router.replace({
                            path:'/login'
                        })
                    }else{
                        loading.close()
                        self.$message.error(res.message)
                    }
                })
            },
            //删除上传的源码
            deleteUploadFile(){
                let self = this
                self.$confirm('是否删除?', '提示', {
                    confirmButtonClass: 'el-button--warning'
                }).then(() => {
                    self.updateStepCode(1)
                }).catch(() => {});
            },
            //type==1代表删除上传源码
            updateStepCode(type){
                let self = this
                let data = {}
                if(type == 1){
                    data = {
                        id: self.stepSaveId,
                        codeName: ''
                    }
                }else{
                    data = {
                        id: self.stepSaveId,
                        codeName: self.ruleForm.uploadFile
                    }
                }
                self.$http.post('/dataplatform/chapter/step/updateStepCode', data).then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        if(type == 1){
                            self.ruleForm.uploadFile = ''
                            self.$message({
                                message: '删除成功',
                                type: 'success'
                            })
                        }
                    }else if(res.code == '401'){
                        self.$router.replace({
                            path:'/login'
                        })
                    }else{
                        self.$message.error(res.message)
                    }
                })
            },
            //放大缩小editor
            bigEditor(){
                if(this.fangdaStatus == true){
                    this.fangdaStatus = false
                    $('#step-editor-editor').css('height','220px')
                    if(this.projectType == 1){
                        this.stepEditorHeight.border = 'solid 1px #bfbfbf'
                        this.stepEditorHeight.maxHeight = '220px'
                    }
                }else{
                    this.fangdaStatus = true
                    $('#step-editor-editor').css('height','800px')
                    if(this.projectType == 1){
                        this.stepEditorHeight.border = 'none'
                        this.stepEditorHeight.maxHeight = ($('body').height()-260)+'px'
                    }
                }
            },
            //步骤说明保存
            submitForm() {
                let self = this
                self.Loading = this.$loading({
                    lock: true,
                    text: '加载中',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.7)'
                })
                self.stepItemId = self.dynamicValidateForm.domains[self.stepActiveIndex].id
                let stepEtiorContentText = document.getElementById('step-editor-text').value
                self.$http.post('/dataplatform/chapter/step/updateAndGetStep',{
                    tabType: 0,
                    id: self.stepSaveId,
                    itemServiceType: self.itemServiceType,
                    instructions: stepEtiorContentText
                }).then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        self.$message({
                            message: '保存成功',
                            type: 'success'
                        })
                        self.Loading.close()
                        // self.saveSuccessStatus = true
                    }else if(res.code == '401'){
                        self.Loading.close()
                        self.$router.replace({
                            path:'/login'
                        })
                    }else{
                        self.Loading.close()
                        self.$message.error(res.message)
                    }
                })
            },
            //数据源环境检查保存
            saveData(){
                let self = this
                let content
                if(self.leftContentTabActiveIndex == 2){
                    content = self.ruleForm.dataEtiorContent
                }else if(self.leftContentTabActiveIndex == 3){
                    content = self.ruleForm.environmentEtiorContent
                }
                self.$http.post('/dataplatform/chapter/step/updateItemExtendInfo',{
                    chapterId: self.chapterId,
                    stepType: self.leftContentTabActiveIndex,
                    content: content
                }).then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        self.$message({
                            message: '保存成功',
                            type: 'success'
                        })
                    }else if(res.code == '401'){
                        self.$router.replace({
                            path:'/login'
                        })
                    }else{
                        self.$message.error(res.message)
                    }
                })
            },
            //右侧菜单动画
            mirrorArrowFn(){
                if(this.mirrorRightData == -150){
                    this.mirrorRightData = 0
                    this.mirrorArrowData = 150
                    this.mirrorActiveData = true
                }else{
                    this.mirrorRightData = -150
                    this.mirrorArrowData = 0
                    this.mirrorActiveData = false
                }
            },
            //替换虚拟机
            replaceVirtual(index) {
                let self = this
                self.$confirm('初始化会丢失文件、数据，确定要初始化吗?', '初始化', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    let path
                    if(self.itemServiceType == 1){
                        path = '/dataplatform/container/replace?experimentId='+self.projectId
                    }else if(self.itemServiceType == 2){
                        // path = '/dataplatform/image/replace?containerId='+self.desktopId+'&practiceMode=true'
                        path = '/dataplatform/container/replace?experimentId='+self.projectId+'&practiceMode=true'
                    }
                    // path = '/dataplatform/container/replace?experimentId='+self.projectId+'&practiceMode=true'
                    self.deskLoading = true
                    self.deskLoadingText = '初始化中'
                    self.desktopBtnList = ''
                    self.$http.get(path).then(response => {
                        let res = response.data
                        if(res.code == '200'){
                            self.deskLoading = false
                            self.$message({
                                type: 'success',
                                message: '初始化成功!'
                            })
                            self.desktopBtnList = res.data.desktopList
                            self.desktopUrl = res.data.desktopList[index].desktopUrl
                            self.VirtualMachineUrlArr = res.data.desktopList
                            self.desktopId = res.data.desktopList[index].containerId
                        }else if(res.code == '401'){
                            self.deskLoading = false
                            self.$router.replace({
                                path:'/login'
                            })
                        }else{
                            self.deskLoading = false
                            self.$message.error(res.message)
                        }
                    })
                }).catch(() => {
                })
            },
            //sftp工具
            sftpDownload(){
                let self = this
                self.$http.get('/dataplatform/container/getSFTPAddress?containerId='+self.desktopId).then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        self.sftpData.ip = res.data.ip
                        self.sftpData.port = res.data.port
                    }else if(res.code == '401'){
                        self.$router.replace({
                            path:'/login'
                        })
                    }else{
                        self.$message.error(res.message)
                    }
                })
                self.sftpDialogVisible = true
            },
            //弹窗step切换
            addClass:function(index){
                this.form.virtualStepCurrent = index
            },
            //实训笔记
            notesFn(){
                let self = this
                self.$http.get('/dataplatform/chapter/getStudentNotes?itemId='+self.projectId).then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        self.notesDataList = res.data.stepList
                        self.notesDataName = res.data.chapter.name
                        self.notesDialogFormVisible = true
                    }else if(res.code == '401'){
                        self.$router.replace({
                            path:'/login'
                        })
                    }else{
                        self.$message.error(res.message)
                    }
                })
            },
            //关闭实训笔记
            closeDialog() {
                let self = this
				self.notesDialogFormVisible = false
            },
            //文件下载
            downloadFile(){
                let self = this
                self.downloadDialogVisible = true
            },
            // 二期更改文件下载
            fileDownCheck() {
                let self =  this
                self.$http.get('/dataplatform/container/download-check?chapterId='+self.chapterId).then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        let downloadElement = document.createElement('a');
                        downloadElement.style.display = 'none';
                        downloadElement.href =  '/dataplatform/container/download?chapterId='+self.chapterId;
                        document.body.appendChild(downloadElement);
                        downloadElement.click(); //点击下载
                    }else if(res.code == '401'){
                        self.$router.replace({
                            path:'/login'
                        })
                    }else{
                        self.$message.error(res.message)
                    }
                })
            },
            //分享桌面
            shareFn(){
                let self = this
                // self.shareData.shareRuleForm.teacherStatus = []
                // self.shareData.shareRuleForm.teacherValue = []
                self.shareData.shareRuleForm.studentStatus = [
                    {
                        value: '全选',
                        label: '全选'
                    }
                ]
                self.shareData.shareRuleForm.studentValue = []
                self.$http.get('/dataplatform/container/share/user/list?experimentId='+self.projectId).then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        if (res.data.studentList.length == 0) {
                            self.shareData.shareRuleForm.studentStatus = []
                        }

                        // for (let i = 0; i < res.data.teacherList.length; i++) {
                        //     let teacherJson = {}
                        //     teacherJson.label = res.data.teacherList[i].username
                        //     teacherJson.value = res.data.teacherList[i].stuorteaId
                        //     self.shareData.shareRuleForm.teacherStatus.push(teacherJson)
                        // }
                        for (let i = 0; i < res.data.studentList.length; i++) {
                            let studentJson = {}
                            studentJson.label = res.data.studentList[i].username
                            studentJson.value = res.data.studentList[i].stuorteaId
                            self.shareData.shareRuleForm.studentStatus.push(studentJson)
                        }
                    }else if(res.code == '401'){
                        self.$router.replace({
                            path:'/login'
                        })
                    }else{
                        self.$message.error(res.message)
                    }
                })
                this.shareDialogVisible = true
            },
            //分享桌面表单提交
            shareSubmitForm(formName){
                let self = this
                if (self.shareData.shareRuleForm.studentValue == '') {
                    self.$message.error('至少选择一项进行分享')
                    return
                }
                if (self.shareData.shareRuleForm.studentValue[0] == '全选') {
                    self.shareData.shareRuleForm.studentValue = self.shareData.shareRuleForm.studentValue.slice(1)
                }
                self.$refs[formName].validate((valid) => {
                    if (valid) {
                        self.shareDisabled = true
                        self.$http.post('/dataplatform/container/share/start',{
                            containerId: self.desktopId,
                            controllable: self.shareData.shareRuleForm.resource,
                            studentAndTeacher: {
                                // teacherList: self.shareData.shareRuleForm.teacherValue,
                                studentList: self.shareData.shareRuleForm.studentValue
                            }
                        }).then(response => {
                            let res = response.data
                            if(res.code == '200'){
                                self.$message({
                                    message: '分享成功',
                                    type: 'success'
                                })
                                self.shareDisabled = false
                                self.shareDialogVisible = false
                            }else if(res.code == '401'){
                                self.$router.replace({
                                    path:'/login'
                                })
                            }else{
                                self.shareDisabled = false
                                self.$message.error(res.message)
                            }
                        })
                    }
                })
            },
            //桌面分享关闭
            desktopClose(){
                this.notesData.splice(this.noteDialogIndex, 1)
                this.notesDialogVisible = false
            },
            //关闭分享
            closeShareFn(){
                let self = this
                self.$confirm('是否关闭分享?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    self.$http.get('/dataplatform/container/share/stop?containerId='+self.desktopId).then(response => {
                        let res = response.data
                        if(res.code == '200'){
                            self.$message({
                                type: 'success',
                                message: '关闭成功!'
                            })
                        }else if(res.code == '401'){
                            self.$router.replace({
                                path:'/login'
                            })
                        }else{
                            self.$message.error(res.message)
                        }
                    })

                }).catch(() => {
                })
            },
            //剪切板
            cutFn(){
                this.cutDialogVisible = true
                this.cutData.cutRuleForm.desc = ''
            },
            //剪切板表单提交
            cutSubmitForm(formName) {
                let self = this
                self.$refs[formName].validate((valid) => {
                    if (valid) {
                        const loading = this.$loading({
                            lock: true,
                            text: '剪切文件提交中',
                            spinner: 'el-icon-loading',
                            background: 'rgba(0, 0, 0, 0.7)'
                        })
                        self.$http.post('/dataplatform/container/clipboard',{
                            containerId: self.desktopId,
                            content: self.cutData.cutRuleForm.desc
                        }).then(response => {
                            let res = response.data
                            if(res.code == '200'){
                                loading.close()
                                self.$message({
                                    type: 'success',
                                    message: '保存成功!'
                                })
                                self.cutDialogVisible = false
                            }else if(res.code == '401'){
                                loading.close()
                                self.$router.replace({
                                    path:'/login'
                                })
                            }else{
                                loading.close()
                                self.$message.error(res.message)
                            }
                        })
                    }
                })
            },
            //消息通知
            noteSelect(){
                if(this.notesData.length == 0){
                    return
                }
                if(this.noteBottom == -144){
                    this.noteBottom = 28
                }else{
                    this.noteBottom = -144
                }
            },
            //消息彈窗
            noteDialog(desktopUrl, controllable, index){
                this.noteDialogDesktopUrl = desktopUrl
                this.noteDialogControllable = controllable
                this.noteDialogIndex = index
                this.notesDialogVisible =  true
            },
            notesClose(){
                if(this.notesData.length == 0){
                    this.noteBottom = -144
                }
            },
            //退出
            outFn(){
                // this.$router.push({
                //     path: '/student/index'
                // })
                //type = 1 为教学模式，type = 2 为练习模式
                if(this.types == 1){
                    this.$router.push({
                        path: '/student/projectintroduction'
                    })
                }else if(this.types == 2){
                    this.$router.push({
                        path: '/student/projectintroductionCustomize'
                    })
                }
            },
            //隐藏桌面
            hideDesktop(){
                let screenWidth = window.screen.width
                if(this.leftData != -210){
                    this.leftData = -210
                    this.activeData = true
                    this.editorOrAdd = true
                }
                if(this.mirrorRightData != -150){
                    this.mirrorRightData = -150
                    this.mirrorArrowData = 0
                    this.mirrorActiveData = false
                }
                if(screenWidth <= 1280){
                    
                     if (!this.hideDesktopStatus && this.hideDocStatus) {
                        $(".step-main-mirror").css({
                            'float': 'none',
                            'width': (1024 / 768) * ($(window).height()),
                            'margin': '0 auto'
                        });
                        $(".step-main-content-parent").width(0)
                        $('.step-main-content').width(0)
                        $('.step-main-content .step-right').css({
                            'padding': 0
                        })
                        this.hideDesktopStatus = true
                        this.hideDocStatus = false
                    }else if (this.hideDesktopStatus && !this.hideDocStatus){
                        $('.step-main-mirror').css({
                            'width': 0,
                            'background': '#fff'
                        })
                        $('.step-main-content-parent').css('width','100%')
                        $(".step-main-content").css({
                            'float': 'none',
                            'width':'60%',
                            'margin': '0 auto'
                        })
                        $('.step-main-content .step-right').css({
                            'padding': '20px 40px 0'
                        })
                        this.hideDesktopStatus = false
                        this.hideDocStatus = true
                    }
                }else{
                    if(this.hideDesktopStatusValue == 1 && this.hideDocStatusValue == 1){
                        $(".step-main-mirror").css({
                            'float': 'none',
                            'width': (1024 / 768) * ($(window).height()),
                            'margin': '0 auto'
                        });
                        $(".step-main-content-parent").width(0)
                        $('.step-main-content').width(0)
                        $('.step-main-content .step-right').css({
                            'padding': 0
                        })
                        this.hideDesktopStatus = false
                        this.hideDocStatus = true
                        this.hideDocStatusValue = 2
                //         $(".mirror-iframe-box").width((1024 / 768) * ($(window).height()));
                // $('.step-main-content-parent').width($(window).width() - $(".mirror-iframe-box").width() - 1)
                // $(".step-main-content").width($(window).width() - $(".mirror-iframe-box").width() - 1);
                // $('.step-right').height($(window).height())
                    }else if(this.hideDesktopStatusValue == 2 && this.hideDocStatusValue == 1){
                        $(".mirror-iframe-box").width((1024 / 768) * ($(window).height()))
                        let width = $(window).width() - $(".mirror-iframe-box").width() - 1

                        $('.step-main-content-parent').css('width',width)
                        $(".step-main-content").css({
                            'width': width,
                            'float': 'left'
                        })
                        $('.step-main-content .step-right').css({
                            'padding': '20px 40px 0'
                        })
                        this.hideDesktopStatus = true
                        this.hideDocStatus = true
                        this.hideDesktopStatusValue = 1
                    }
                }
            },
            //隐藏文档
            hideDoc(){
                let screenWidth = window.screen.width
                if(this.leftData != -210){
                    this.leftData = -210
                    this.activeData = true
                    this.editorOrAdd = true
                }
                if(this.mirrorRightData != -150){
                    this.mirrorRightData = -150
                    this.mirrorArrowData = 0
                    this.mirrorActiveData = false
                }
                if(screenWidth <= 1280){

                     if (!this.hideDesktopStatus && this.hideDocStatus) {
                        $(".step-main-mirror").css({
                            'float': 'none',
                            'width': (1024 / 768) * ($(window).height()),
                            'margin': '0 auto'
                        });
                        $(".step-main-content-parent").width(0)
                        $('.step-main-content').width(0)
                        $('.step-main-content .step-right').css({
                            'padding': 0
                        })
                        this.hideDesktopStatus = true
                        this.hideDocStatus = false
                    }else if (this.hideDesktopStatus && !this.hideDocStatus){
                        $('.step-main-mirror').css({
                            'width': 0,
                            'background': '#fff'
                        })
                        $('.step-main-content-parent').css('width','100%')
                        $(".step-main-content").css({
                            'float': 'none',
                            'width':'60%',
                            'margin': '0 auto'
                        })
                        $('.step-main-content .step-right').css({
                            'padding': '20px 40px 0'
                        })
                        this.hideDesktopStatus = false
                        this.hideDocStatus = true
                    }
                }else{
                   
                    if(this.hideDesktopStatusValue == 1 && this.hideDocStatusValue == 1){
                        $(".mirror-iframe-box").width(0);
                        $('.step-main-content-parent').css('width','100%')
                        $(".step-main-content").css({
                            'float': 'none',
                            'width':'60%',
                            'margin': '0 auto'
                        })
                        this.hideDesktopStatus = true
                        this.hideDocStatus = false
                        this.hideDesktopStatusValue = 2
                    }else if(this.hideDesktopStatusValue == 1 && this.hideDocStatusValue == 2){
                        $('.step-main-mirror').css({
                            //ya
                            'width': 0,
                            'float': 'left'
                        })
                        $(".mirror-iframe-box").width((1024 / 768) * ($(window).height()))
                        let width = $(window).width() - $(".mirror-iframe-box").width() - 1

                        $('.step-main-content-parent').css('width',width)
                        $(".step-main-content").css({
                            'width': width,
                            'float': 'left'
                        })
                        $('.step-main-content .step-right').css({
                            'padding': '20px 40px 0'
                        })
                        this.hideDesktopStatus = true
                        this.hideDocStatus = true
                        this.hideDocStatusValue = 1
                    }
                }
            },
            //进入全屏
            entryFullScreen() {
                // let self = this
                // if (self.entryFullStatus == true) {
                //     let docE = document.documentElement;
                //     if (docE.requestFullScreen) {
                //         docE.requestFullScreen();
                //     } else if (docE.mozRequestFullScreen) {
                //         docE.mozRequestFullScreen();
                //     } else if (docE.webkitRequestFullScreen) {
                //         docE.webkitRequestFullScreen();
                //     }
                //     if (this.hideDesktopStatus && this.hideDocStatus) {
                //         $(".mirror-iframe-box").css({
                //             'width': '100%',
                //             'height': '100%'
                //         })
                //         $('.mirror-iframe').css({
                //             'height': '100%'
                //         })
                //         $('.mirror-iframe iframe').css({
                //             'height': '100%'
                //         })
                //         $('.step-main-mirror').css({
                //             'width': $(window).width() - $('.step-main-content-parent').width()
                //         })
                //     }
                //     this.entryFullStatus = false
                //     this.hideBtnStatus = false
                // }else{
                //     let docE = document;
                //     if (docE.exitFullscreen) {
                //         docE.exitFullscreen();
                //     } else if (docE.mozCancelFullScreen) {
                //         docE.mozCancelFullScreen();
                //     } else if (docE.webkitCancelFullScreen) {
                //         docE.webkitCancelFullScreen();
                //     }
                //     this.entryFullStatus = true
                //     this.hideBtnStatus = true
                // }
                let element = document.body
                if (this.isFullScreen()){
                    this.cancelFullScreen()
                    // if (this.hideDesktopStatus && this.hideDocStatus) {
                    //     $(".mirror-iframe-box").css({
                    //         'width': '100%',
                    //         'height': '100%'
                    //     })
                    //     $('.mirror-iframe').css({
                    //         'height': '100%'
                    //     })
                    //     $('.mirror-iframe iframe').css({
                    //         'height': '100%'
                    //     })
                    //     $('.step-main-mirror').css({
                    //         'width': $(window).width() - $('.step-main-content-parent').width()
                    //     })
                    // }
                    this.entryFullStatus = true
                    this.hideBtnStatus = true
                }else{
                    this.requestFullScreen(element || document.documentElement)
                    $(".mirror-iframe-box").css({
                        'width': '100%',
                        'height': '100%'
                    })
                    $('.mirror-iframe').css({
                        'height': '100%'
                    })
                    $('.mirror-iframe iframe').css({
                        'height': '100%'
                    })
                    $('.step-main-mirror').css({
                        'width': $(window).width() - $('.step-main-content-parent').width()
                    })
                    this.entryFullStatus = false
                    this.hideBtnStatus = false
                }
            },
            isFullScreen() {
                return (document.fullScreenElement && document.fullScreenElement !== null) || document.mozFullScreen || document.webkitIsFullScreen;
            },
            cancelFullScreen() {
                if (document.exitFullscreen){
                    document.exitFullscreen()
                }else if (document.msExitFullscreen){
                    document.msExitFullscreen()
                }else if (document.mozCancelFullScreen){
                    document.mozCancelFullScreen()
                }else if (document.webkitExitFullscreen){
                    document.webkitExitFullscreen()
                }
            },
            requestFullScreen(element) {
                if (element.requestFullscreen){
                    element.requestFullscreen()
                }else if (element.msRequestFullscreen){
                    element.msRequestFullscreen()
                }else if (element.mozRequestFullScreen){
                    element.mozRequestFullScreen()
                }else if (element.webkitRequestFullscreen){
                    element.webkitRequestFullscreen()
                }
            }
        }
    }
</script>
<style lang="scss" >
    body{
        overflow-x:hidden !important ;
    }

</style>
